<template>
	<view class="full-screen flex-c">
		<view class="reward flex-c">
			<image class="bg-img" src="@/public/images/other/tc_zp.png" mode="widthFix"></image>
			<image class="btn-img" src="@/public/images/other/tc_an.png" mode="widthFix" @tap="goExpertReward"></image>
			<image class="close-img" src="@/public/images/other/qdqxan.png" mode="aspectFit" @tap="close"></image>
		</view>
	</view>
</template>

<script>
	/**
	 * ExpertReward 专家福利弹窗
	 * @description 购买专家料达到一定次数弹出专家福利领取入口
	 * @property {String} expertId 专家ID
	 * @event {Function} close 弹窗关闭事件
	 * @example <ExpertReward :expertId="expertId"></ExpertReward>
	 */
	export default {
		name:"ExpertReward",
		emits: ['close'],
		props: {
			expertId: {
				type: String
			}
		},
		methods: {
			//打开福利领取页面
			goExpertReward() {
				this.$goByName('expertreward', {eid: this.expertId, random: Date.now()});
				this.close();
			},
			//关闭
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.full-screen{
		align-items: center;
		justify-content: center;
		z-index: 1000;
		overflow-x: scroll;
		.reward{
			align-items: center;
			position: relative;
			margin: 96rpx 30rpx;
			.bg-img{
				width: 690rpx;
				margin-top: 96rpx;
			}
			.btn-img{
				width: 400rpx;
			}
			.close-img{
				position: absolute;
				top: 96rpx;
				right: 0;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>